<template>
    <a-modal :width="550"
             :title="title"
             destroyOnClose
             :maskClosable="false"
             @close="close"
             v-model="visible">
        <a-form-model
                ref="ruleForm"
                small
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol">
            <a-form-model-item label="账号名称">
                {{form.userName}}
            </a-form-model-item>
            <a-form-model-item label="角色信息" prop="roleIds">
                <a-select
                        v-model="form.roleIds"
                        mode="multiple"
                        placeholder="请选择角色">
                    <a-select-option v-for="(item,index) in roleList"
                                     :value="item.id"
                                     :label="item.roleName"
                                     :key="index">
                        {{item.roleName}}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
        <div slot="footer" class="text-c">
            <a-button @click="close">关闭</a-button>
            <a-button type="primary" :loading="loading" @click="sure">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    export default {
        data () {
            return {
                form: {
                    userName: '',
                    id: '',
                    roleIds: '',
                },
                labelCol: { span: 4 },
                wrapperCol: { span: 20 },
                rules: {
                    roleIds: [
                        { required: true, message: '请选择关联角色', trigger: 'blur' },
                    ],
                },
                visible: false,
                title: '账号角色关联',
                roleList: [],
                loading: false,
            };
        },
        methods: {
            sure () {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$api.permission.adminuserauthorizerole(this.form).then(res => {
                            if (res && res.code !== 200) {
                                this.$message.error(res.errorMsg);
                                return;
                            }
                            this.$message.success('关联成功');
                            this.$emit('done');
                            this.close();
                        }).catch(err => {
                            this.$message.error(err.errorMsg);
                        });
                    }
                });
            },
            show (data) {
                let temData = JSON.parse(JSON.stringify(data));
                this.form.userName = temData.userName;
                this.form.id = temData.id;
                let roleList = (temData.roleList && temData.roleList.length > 0 ) ?  temData.roleList.map(v => v.roleId) : [];
                this.getRoleList(roleList);
                this.visible = true;
            },
            getRoleList (data) {
                this.$api.permission.listbyrole({ pageNum: 1, pageSize: 200,}).then(res => {
                    this.roleList = res && res.data && res.data.records || [];
                    (this.roleList.length > 0) ? (this.form.roleIds = data) : [];
                });
            },
            close () {
                this.form = {
                    userName: '',
                    id: '',
                    roleIds: '',
                };
                this.loading = false;
                this.roleList = [];
                this.visible = false;
            },
        }
    };
</script>

<style scoped lang="scss">

</style>
